import React, { Component } from 'react';
import { Row } from 'react-bootstrap'
import { connect } from 'react-redux'
import { logoutUser } from '../actions'
import NavBar from '../components/NavBar'
import Footer from '../components/Footer'

class App extends Component {
  render() {
    return (
      <div className="container-fluid">
        <Row>
          <NavBar user={this.props.user} logout={this.props.logout}></NavBar>
        </Row>
        <Row>
          {this.props.children}
        </Row>
        <Row><Footer></Footer></Row>
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    user: state.user
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    logout: () => {
      dispatch(logoutUser())
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)
